<template>
    <div>
        <h2></h2>
        <div class="chart" id="c4">

        </div>
    </div>
</template>

<script>
import { inject, onMounted, reactive } from 'vue';
export default {
    setup(){
        let $echarts = inject("echarts")
        let $http = inject("axios")
        let data = reactive({})
        let day = reactive({})
        let num = reactive({})
        async function getState(){
            let data = await $http({ url: "/4/data" })
            day = data.data.chartData.chartData.day
            num = data.data.chartData.chartData.num
            
        }
        onMounted(() => {
            getState().then(() => {
                let chart = $echarts.init(document.getElementById("c4"))
                chart.setOption({
                    gird:{
                        left:"3%",
                        right:"4%",
                        bottom:"3%",
                        containLabel:"true"
                    },
                    xAxis:{
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff"
                            }
                        },
                        type: "category",
                        data:day,
                        axisLine:{
                            lineStyle:{
                                color:"#fff"
                            }
                        }
                    
                    },
                    yAxis:{
                        axisLabel: {
                            textStyle: {
                                color: "#ffffff"
                            }
                        },
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#fff"
                            }
                        }
                
                    },
                    legend:{},
                    tooltip:{
                        trigger:"axis",
                        axisPointer:{
                            type:"shadow"
                        }
                    },
                    series:[
                        {
                            name: "服饰",
                            type: "bar",
                            data: num.clothes,
                            stack: "total",
                            label:{
                                show:true
                            },
                            emphasis:{
                                focus:"series"
                            }
                        },
                        {
                            name: "数码",
                            type: "bar",
                            data: num.digit,
                            stack: "total",
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: "series"
                            }
                        },
                        {
                            name: "家电",
                            type: "bar",
                            data: num.electrical,
                            stack: "total",
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: "series"
                            }
                        },
                        {
                            name: "家居",
                            type: "bar",
                            data: num.gear,
                            stack: "total",
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: "series"
                            }
                        },
                        {
                            name: "日化",
                            type: "bar",
                            data: num.chemicals,
                            stack: "total",
                            label: {
                                show: true
                            },
                            emphasis: {
                                focus: "series"
                            }
                        }
                    ]
                })
            })
        })
        return{
            data, getState, day,num
        }
    }
}
</script>

<style lang="less" scoped>
.chart {
            height: 4.5rem;
        }
    
        h2 {
            height: 0.6rem;
            color: #fff;
            line-height: 0.6rem;
            font-size: 0.25rem;
            text-align: center;
        }
</style>